前言

製作專案或練習時，部署到網路上後一看，咦！阿怎麼連結全部死掉、畫面或圖片全部出不來，完蛋惹、怎麼會這樣咧？

其實是因為路報錯惹！

錯用了相對路徑，所以瀏覽器或網頁要找東西找不到路，因為地址根本是錯的，難怪出錯。

正文

絕對路徑（Absolute Paths）

絕對路徑是一條完整的「路」，明確指出這個東西在哪裡、怎麼去。不會因為起點不同而有不同的路徑。

例如：

• 到 C 槽沿著這條路走就會找到 xxx.png：<img src="C:\Users\images/xxx.png">
• 描述 google 網站在網路上的地址：https://www.google.com
• MDN 的官網是：https://developer.mozilla.org/en-US/

相對路徑（Relative Paths）

相對路徑是指相對於現在頁面 / 位置的路徑位址。會因為起點不同所以地址（路徑）不同。

例如：

• <img src="pic.png">　或　<img src="./pic.png">
  指的是 pic 這張圖片與當前頁面處在同個資料夾之中

• <img src="images/pic.png">　或　<img src="./images/pic.png">
  指的是 pic 這張圖片位在當前資料夾下的 images 資料夾中

• <img src="/images/pic.png">
  指的是 pic 這張圖片位在當前網站根目錄下的 images 資料夾中

• <img src="../pic.png">
  指的是 pic 這張圖片位在當前資料夾的上一層資料夾

• 備註：

  • 使用相對路徑時需要注意，尤其在網頁編寫完打包後，檔案 / 資料夾位置可能會跟原本的不同，導致連結、指向全部死去ˊ_>ˋ
  • 一個點點 . 指的是當前目錄
  • 兩個點點 .. 指的是到父層的目錄。去找他爸（欸）
  • 但使用時注意不要更動到相對位置，就會變得很好用喔～
    • 例如 <img src="/images/pic.png">，有個固定的出發點 / （根目錄），以此為主來分配資料夾與檔案，這樣就不用擔心了O_<

參考資料：

• 【網路教學】相對路徑與絕對路徑-英傑銳網路數位，https://www.injerry.com/blog_view/131
• HTML File Paths，https://www.w3schools.com/html/html_filepaths.asp